<template>
  <div class="container">
    <div class="movie-category">
      <h2 class="category-title">电视剧</h2>
      <div class="movie-list">
        <div class="movie-item" v-for="movie in tvShows.slice(0, 10)" :key="movie.vid">
          <router-link :to="{ name: 'MovieDetail', params: { vid: movie.vid } }" class="movie-card">
            <img :src="movie.vimg" alt="Movie image" class="movie-image">
            <div class="movie-title">{{ movie.vtitle }}</div>
          </router-link>
        </div>
      </div>
    </div>

    <div class="movie-category">
      <h2 class="category-title">综艺</h2>
      <div class="movie-list">
        <div class="movie-item" v-for="movie in varietyShows.slice(0, 10)" :key="movie.vid">
          <router-link :to="{ name: 'MovieDetail', params: { vid: movie.vid } }" class="movie-card">
            <img :src="movie.vimg" alt="Movie image" class="movie-image">
            <div class="movie-title">{{ movie.vtitle }}</div>
          </router-link>
        </div>
      </div>
    </div>

    <div class="movie-category">
      <h2 class="category-title">电影</h2>
      <div class="movie-list">
        <div class="movie-item" v-for="movie in movieShows.slice(0, 10)" :key="movie.vid">
          <router-link :to="{ name: 'MovieDetail', params: { vid: movie.vid } }" class="movie-card">
            <img :src="movie.vimg" alt="Movie image" class="movie-image">
            <div class="movie-title">{{ movie.vtitle }}</div>
          </router-link>
        </div>
      </div>
    </div>

    <div class="movie-category">
      <h2 class="category-title">动漫</h2>
      <div class="movie-list">
        <div class="movie-item" v-for="movie in animationShows.slice(0, 10)" :key="movie.vid">
          <router-link :to="{ name: 'MovieDetail', params: { vid: movie.vid } }" class="movie-card">
            <img :src="movie.vimg" alt="Movie image" class="movie-image">
            <div class="movie-title">{{ movie.vtitle }}</div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  //空数组用于存储从服务器获取的影视数据
  data() {
    return {
      movies: []
    }
  },

  //四个计算属性，根据影视类型对 movies 数组进行筛选
  computed: {
    tvShows() {
      return this.movies.filter(movie => movie.classify === '电视剧');
    },
    varietyShows() {
      return this.movies.filter(movie => movie.classify === '综艺');
    },
    movieShows() {
      return this.movies.filter(movie => movie.classify === '电影');
    },
    animationShows() {
      return this.movies.filter(movie => movie.classify === '动漫');
    }
  },
  created() {
    axios.get('http://localhost:8080/movie')
      .then(response => {
        this.movies = response.data.data || [];  
      })
      .catch(error => {
        console.error('There was an error!', error);
      });
  }
}
</script>

<style scoped>

.container {
    width: 80%;            
    margin-left: auto;    
    margin-right: auto;   
    background-color: #f9f9f9;
    padding: 20px;        
    border-radius: 8px;   
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
}
/* 分类标题样式 */
.category-title {
  font-size: 1.5em;
  margin-bottom: 1em;
  color: #333;
  text-align: center;
  position: relative;
  font-weight: bold;
}

.category-title::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background-color: #007BFF;
  margin: 0.5em auto 0;
  border-radius: 2px;
}


.movie-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; 
  row-gap: 2em; 
}

.movie-item {
  width: calc(18% - 1em); 
  box-sizing: border-box;
}

.movie-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  font-size: 1.5em;
}

.movie-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
}


.movie-image {
  width: 100%;
  height: auto; 
}


.movie-title {
  padding: 0.5em;
  font-size: 1em;
  color: #444;
  word-break: break-word;
}


.movie-category {
  margin-bottom: 3em;
}
</style>